<template>
	<view class="content wrap">
		<u-form :model="form" ref="uForm" :rules="rules">
				<view class="wrap">
					<u-row>
						<u-col span="12">
							<view class="weikaishi3">
								<span><u-icon  size="100" labelSize="20px" labelColor="#000000"
										label="门店退货登记"></u-icon></span>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="12">
							<view class="weikaishi3">
								<span><u-icon  size="100" labelSize="20px" labelColor="#000000"></u-icon></span>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="12">
							<view class="weikaishi4">
								<span><u-icon size="25" labelSize="13px"></u-icon>注意：请认真填写每一项信息，确保内容的真实性和准确性，不要遗漏或虚报任何信息，仓库核实无误后才会进行下一步操作。</span>
							</view>
						</u-col>
					</u-row>
				</view>
				
				<view class="wrap">
					<u-row>
						<u-col span="12">
							<view class="weikaishi3">
								<span class="red-star">*</span>
								<span><u-icon  size="80" labelSize="15px" labelColor="#000000"
										label="01:申请门店"></u-icon></span>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-form-item label-width="150" prop="unitName">
							<u-input v-model="form.unitName" placeholder="请输入门店名称" />
						</u-form-item>
					</u-row>
				</view>
				
				<view class="wrap">
					<u-row>
						<u-col span="12">
							<view class="weikaishi3">
								<span class="red-star">*</span>
								<span><u-icon  size="80" labelSize="15px" labelColor="#000000"
										label="02:退货品名"></u-icon></span>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-form-item label-width="150" prop="goodsName">
							<u-input v-model="form.goodsName" placeholder="请输入商品名称" />
						</u-form-item>
					</u-row>
				</view>
				
				<view class="wrap">
					<u-row>
						<u-col span="12">
							<view class="weikaishi3">
								<span class="red-star">*</span>
								<span><u-icon  size="80" labelSize="15px" labelColor="#000000"
										label="03:退货箱数"></u-icon></span>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-form-item label-width="150" prop="refundNum">
							<u-input v-model="form.refundNum" placeholder="请输入退货数量" />
						</u-form-item>
					</u-row>
				</view>
					
					<view class="wrap">
						<u-row>
							<u-col span="12">
								<view class="weikaishi3">
									<span class="red-star">*</span>
									<span><u-icon  size="80" labelSize="15px" labelColor="#000000"
											label="04:提走日期"></u-icon></span>
								</view>
							</u-col>
						</u-row>
						<u-row>
							<u-form-item label-width="150" prop="carryDate">
								<u-input v-model="form.carryDate" placeholder="例如:2020-10-20" />
							</u-form-item>
						</u-row>
					</view>
					
					<view class="wrap">
						<u-row>
							<u-col span="12">
								<view class="weikaishi3">
									<span class="red-star">*</span>
									<span><u-icon  size="80" labelSize="15px" labelColor="#000000"
											label="05:退货照片反馈"></u-icon></span>
								</view>
							</u-col>
						</u-row>
						<u-row>
							<u-form-item label-width="150" prop="refundFeedback">
								<u-input v-model="form.refundFeedback" placeholder="请输入问题反馈" />
							</u-form-item>
						</u-row>
					</view>
					
			<u-form-item label="退货照片" label-width="120" left-icon="star-fill">
				<view style="height: 500rpx;" class="u-line-1 u-m-t-10" v-if="!form.refundPhotoId" @click="uploadimg4()">
					<u-image width="500rpx" height="500rpx" src="https://z3.ax1x.com/2021/08/03/ficppn.png"></u-image>
				</view>
				
				<view style="height: 500rpx;" class="u-line-1 u-m-t-10" v-if="form.refundPhotoId" @click="viewImage(form.refundPhotoId)">
					<u-image width="500rpx" height="500rpx" :src="imgs(form.refundPhotoId)"></u-image>
				</view>
			</u-form-item>
			
		</u-form>
		
		<u-button @click="clockin()" type="primary">提交</u-button>
		
		<view>
			<u-toast ref="uToast" />
		</view>
		
		<view>
			<u-form-item>
			</u-form-item>
		</view>
	</view>
</template>



<script>
	import config from '../../config.js'
	export default {
		data() {
			return {
				form: {
					unitName:"",
					warehouseName:"",
					goodsName:"",
					refundNum:"",
					carryDate:"",
					refundFeedback:"",
					refundPhotoId:"",
					operateId:"",
					operateName:"",
				},
				did: '',
			};
		},
		
		onLoad:function(open){
			//获取司机扫码的项目id
			try{
				var params = this.getQueryParams(open.q)
				if(typeof  params.operateId != 'undefined' && params.operateId != '' && params.operateId != null){
					this.form.operateId= params.operateId
				} 
			} catch (e){
				let getStorageSyncOperateId = uni.getStorageSync('operateId')
				if(typeof getStorageSyncOperateId != 'undefined' && getStorageSyncOperateId != '' && getStorageSyncOperateId != null){
					this.form.operateId= getStorageSyncOperateId
				} 
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			getQueryParams(queryString) {
				// 微信扫码得到的内容进行了一次编码，所以官方要求需要进行decodeURIComponent一次
				queryString = decodeURIComponent(queryString)
				let params = {}
				if (queryString) {
					let queryArray = queryString.split('?')
					if (queryArray.length > 1) {
						let query = queryArray[1]
						let array = query.split('&')
						array.map((value) => {
							let valueArray = value.split('=')
							if (valueArray.length > 1) {
								// 还需要对value进行解码（可能涉及到在value为中文字符，在赋值到二维码前进行encodeURI编码）
								Object.assign(params, {
									[valueArray[0]]: decodeURI(valueArray[1])
								})
							}
						})
					}
				}
				return params
			},
			
			uploadimg4(){
				uni.chooseImage({
					count: 1,
					success: res1 => {
						uni.uploadFile({
							url: config.root + '/rest/temporary/uploadsnew1', // 文件上传路径 ，
							filePath: res1.tempFilePaths[0],
							name: 'file',
							header: {
								'Authorization' :uni.getStorageSync('token'),
							},
							formData: {id:this.did},
							success: res => {
								let data = JSON.parse(res.data);
								if(data.code == 200) {
									uni.showToast({
										title: '上传成功',
										duration: 2000
									});
									setTimeout(() => {
										this.refresh()
									}, 500)
								} else {
									uni.showToast({
										title: data.message,
										duration: 2000,
										icon:'none',
									});
									console.log(data.message)
								}
							}
						})
					}
				})
			},
			
			imgs(fileId){
				return config.root + 'system/previewa/' + fileId
			},
			viewImage(fileId) {
				let arr = []
				let img = config.root + 'system/previewa/' + fileId
				arr.push(img)
				uni.previewImage({
					urls: arr,
				});
			},
			
			clockin() {
				if (typeof this.form.unitName == 'undefined' || this.form.unitName == null || this.form
					.unitName == '') {
					uni.showToast({
						title: '请输入申请门店名称',
						duration: 2000,
						icon: 'none',
					});
					return false;
				}
				if (typeof this.form.goodsName == 'undefined' || this.form.goodsName == null || this.form.goodsName == '') {
					uni.showToast({
						title: '请输入退货商品名称',
						duration: 2000,
						icon: 'none',
					});
					return false;
				}
				if (typeof this.form.refundNum == 'undefined' || this.form.refundNum == null || this.form.refundNum == '') {
					uni.showToast({
						title: '请输入退货箱数',
						duration: 2000,
						icon: 'none',
					});
					return false;
				}
				if (typeof this.form.carryDate == 'undefined' || this.form.carryDate == null || this.form
					.carryDate == '') {
					uni.showToast({
						title: '请输入时间',
						duration: 2000,
						icon: 'none',
					});
					return false; 
				}
				
				if (typeof this.form.refundFeedback == 'undefined' || this.form.refundFeedback == null || this.form
					.refundFeedback == '') {
					uni.showToast({
						title: '请输入退货反馈',
						duration: 2000,
						icon: 'none',
					});
					return false;
				}
					
				let that = this;
				uni.showModal({
				    title: '确认提交吗',
				    success: (res) => {
				        if (res.confirm) {
				            uni.showLoading({
				                title: '加载中...'
				            });
				            this.$http.post('/rest/temporary/storeReturns', {}, {
				                params: that.form,
				                header: {
				                    'Authorization': uni.getStorageSync('token'),
				                }
				            }).then(res => {
				                uni.hideLoading();
				                if (res.data.code == 200) {
				                    uni.showToast({
				                        title: "提交成功",
				                        icon: 'none',
				                        duration: 2000 // 控制提示框显示时间
				                    });
				                    setTimeout(() => {
				                        uni.reLaunch({
				                            url: 'packagesHx/store/store_returns' // 替换成当前页面的路径
				                        });
				                    }, 2000); // 等待提示框消失后刷新
				                } else {
				                    uni.showToast({
				                        title: res.data.message,
				                        icon: 'none'
				                    });
				                }
				            });
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});

				
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
			},
			// 选中某个单选框时，由radio时触发
			radioChange1(e) {
				console.log(e);
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.wrap {
		padding: 30rpx;
	}
	.weikaishi4 span {  
	    color: #aa0000; /* 红色 */  
	} 
	.red-star {  
	    color: #ff0000; /* 红色 */  
	    /* 可能需要添加一些额外的样式来确保星号与<u-icon>组件的文本对齐 */  
	}
</style>
